<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.oauth-area {
				position: absolute;
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				/*-webkit-filter: grayscale(100%); */
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">登录</h1>
		</header>
		<div class="mui-content">
			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row">
					<label>账号</label>
					<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
			</form>
			<form class="mui-input-group">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						自动登录
						<div id="autoLogin" class="mui-switch">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
				</ul>
			</form>
			<div class="mui-content-padded">
				<button id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
				<div class="link-area">
					<a id='reg'>注册账号</a> <span class="spliter">|</span>
					<a id='forgetPassword'>忘记密码</a>
				</div>
			</div>
			<div class="mui-content-padded oauth-area">

			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/app.js"></script>
		<script src="js/ServerURL.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var gotomain;
			(function($, doc) {
				$.init({
					statusBarBackground: '#f7f7f7'
				});
				//按返回的处理
				var backButtonPress = 0;
				mui.back = function(event) {
					backButtonPress++;
					if(backButtonPress > 1) {
						plus.runtime.quit();
					} else {
						plus.nativeUI.toast('再按一次退出应用');
					}
					setTimeout(function() {
						backButtonPress = 0;
					}, 1000);
					return false;
				};
				//
				$.plusReady(function() {
					plus.screen.lockOrientation("portrait-primary");
					var settings = app.getSettings();
					var state = app.getState();
					var mainPage = plus.webview.getWebviewById("main");
					var main_loaded_flag = false;
					if(!mainPage) {
						mainPage = $.preload({
							"id": 'main',
							"url": 'main.html'
						});
					} else {
						main_loaded_flag = true;
					}
					mainPage.addEventListener("loaded", function() {
						main_loaded_flag = true;
					});
					var toMain = function() {
						//登陆后刷新首页
						mainPage.reload(true);
						//使用定时器的原因：
						//可能执行太快，main页面loaded事件尚未触发就执行自定义事件，此时必然会失败
						var id = setInterval(function() {
							if(main_loaded_flag) {
								clearInterval(id);
								$.fire(mainPage, 'show', null);
								mainPage.show("pop-in");
							}
						}, 20);
					};
					gotomain = toMain;
					//判断或填入登陆信息
					var realNames = localStorage.getItem("realName");
					if(realNames != null) //如果缓存中有数据，则加载出来 
					{
						//直接去到主页
						gotomain();

					} else { //已经登陆不再执行下面的代码
						if(localStorage.getItem("txtName") != null) {
							document.getElementById("account").value = localStorage.getItem("txtName");
							document.getElementById("password").value = localStorage.getItem("txtPwd");
						} //将账号与密码保存到localStorage
						else {
							//var check = document.getElementById("chkRem");
							//if(check.checked) //判断记住密码项是否勾选，是则记住密码到本地缓存 
							//{
							//var account = document.getElementById("account").value;
							//var pwd = document.getElementById("password").value;
							//localStorage.setItem("txtName", account);
							//localStorage.setItem("txtPwd", pwd);				
							//} else //否则就移除本地缓存 
							//{
							//	localStorage.removeItem("txtName");
							//	localStorage.removeItem("txtPwd");
							//}
						}
						//检查 "登录状态/锁屏状态" 开始
						if(settings.autoLogin && state.token && settings.gestures) {
							$.openWindow({
								url: 'unlock.html',
								id: 'unlock',
								show: {
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								}
							});
						} else if(settings.autoLogin && state.token) {
							toMain();
						} else {
							app.setState(null);
							//第三方登录
							//var authBtns = ['qihoo', 'weixin', 'sinaweibo', 'qq']; //配置业务支持的第三方登录
							var authBtns = ['qihoo', 'sinaweibo', 'qq']; //配置业务支持的第三方登录
							var auths = {};
							var oauthArea = doc.querySelector('.oauth-area');
							plus.oauth.getServices(function(services) {
								for(var i in services) {
									var service = services[i];
									auths[service.id] = service;
									if(~authBtns.indexOf(service.id)) {
										var isInstalled = app.isInstalled(service.id);
										var btn = document.createElement('div');
										//如果微信未安装，则为不启用状态
										btn.setAttribute('class', 'oauth-btn' + (!isInstalled && service.id === 'weixin' ? (' disabled') : ''));
										btn.authId = service.id;
										btn.style.backgroundImage = 'url("images/' + service.id + '.png")'
										oauthArea.appendChild(btn);
									}
								}
								$(oauthArea).on('tap', '.oauth-btn', function() {
									if(this.classList.contains('disabled')) {
										plus.nativeUI.toast('您尚未安装微信客户端');
										return;
									}
									var auth = auths[this.authId];
									var waiting = plus.nativeUI.showWaiting();
									auth.login(function() {
										waiting.close();
										plus.nativeUI.toast("登录认证成功");
										auth.getUserInfo(function() {
											plus.nativeUI.toast("获取用户信息成功");
											var name = auth.userInfo.nickname || auth.userInfo.name;
											app.createState(name, function() {
												toMain();
											});
										}, function(e) {
											plus.nativeUI.toast("获取用户信息失败：" + e.message);
										});
									}, function(e) {
										waiting.close();
										plus.nativeUI.toast("登录认证失败：" + e.message);
									});
								});
							}, function(e) {
								oauthArea.style.display = 'none';
								plus.nativeUI.toast("获取登录认证失败：" + e.message);
							});
						}
						// close splash
						setTimeout(function() {
							//关闭 splash
							plus.navigator.closeSplashscreen();
						}, 600);
						//检查 "登录状态/锁屏状态" 结束
						var loginButton = doc.getElementById('login');
						var accountBox = doc.getElementById('account');
						var passwordBox = doc.getElementById('password');
						var autoLoginButton = doc.getElementById("autoLogin");
						var regButton = doc.getElementById('reg');
						var forgetButton = doc.getElementById('forgetPassword');
						loginButton.addEventListener('tap', function(event) {
							var loginInfo = {
								account: accountBox.value,
								password: passwordBox.value
							};
							app.login(loginInfo, function(err) {
								//登陆判断拦截
								//							if (err) {
								//								plus.nativeUI.toast(err);
								//								return;
								//							}
								Logininfo();

							});
						});
						$.enterfocus('#login-form input', function() {
							$.trigger(loginButton, 'tap');
						});
						autoLoginButton.classList[settings.autoLogin ? 'add' : 'remove']('mui-active')
						autoLoginButton.addEventListener('toggle', function(event) {
							setTimeout(function() {
								var isActive = event.detail.isActive;
								settings.autoLogin = isActive;
								app.setSettings(settings);
							}, 50);
						}, false);
						//点击注册的事件
						regButton.addEventListener('tap', function(event) {
							$.openWindow({
								url: 'reg.html',
								id: 'reg',
								preload: true,
								show: {
									aniShow: 'pop-in'
								},
								styles: {
									popGesture: 'hide'
								},
								waiting: {
									autoShow: false
								}
							});
						}, false);
						forgetButton.addEventListener('tap', function(event) {
							$.openWindow({
								url: 'forget_password.html',
								id: 'forget_password',
								preload: true,
								show: {
									aniShow: 'pop-in'
								},
								styles: {
									popGesture: 'hide'
								},
								waiting: {
									autoShow: false
								}
							});
						}, false);
						//
						window.addEventListener('resize', function() {
							oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
						}, false);
						//
						var backButtonPress = 0;
						$.back = function(event) {
							backButtonPress++;
							if(backButtonPress > 1) {
								plus.runtime.quit();
							} else {
								plus.nativeUI.toast('再按一次退出应用');
							}
							setTimeout(function() {
								backButtonPress = 0;
							}, 1000);
							return false;
						};
					}
				});
			}(mui, document));

			//登陆信息存入本地缓存
			function Logininfo() {
				//mui.toast(txtName,{ duration:'2000', type:'div' });
				//动态数据加载
				//登陆请求的处理
				//function logininfo() {
				var account = document.getElementById("account").value;
				var pwd = document.getElementById("password").value;
				//请求数据
				mui.ajax({
					type: "post",
					url: ServerURL + '/user/userLogin',
					async: false,
					data: {
						"name": account,
						"password": pwd
					},
					dataType: "jsonp",
					jsonp: "jsoncallback",
					timeout: 1000, //超时时间设置为1秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data, status, xhr) {
						var successString = JSON.parse(data);
						console.log("返回的登陆数据内容为 : " + data);
						if(data.indexOf("data") != -1 && data.indexOf("phone") != -1) {
							//登陆成功存入缓存
							localStorage.setItem("txtName", account);
							localStorage.setItem("txtPwd", pwd);
							localStorage.setItem("realName", successString.data.realName);
							localStorage.setItem("Myphone", successString.data.phone);
							localStorage.setItem("Myname", successString.data.name);
							localStorage.setItem("loginID", successString.data.id);
							localStorage.setItem("headImg", successString.data.headImg);

							mui.toast('登陆成功！昵称：' + successString.data.realName);
							//跳转主页
							gotomain();
						} else if(successString.code == -1) {
							mui.toast('服务器返回数据异常！');
						} else {
							mui.toast('登陆失败，用户名或密码错误！');
						}
						return data;
					},
					error: function(xhr, type, errorThrown) {
						console.log("error: " + type);
						return "获取登陆数据失败：服务器连接失败！";
					}
				});
				//}
			}
		</script>
	</body>

</html>